<script setup lang="ts">
import TimeRangeListSelector from '../time-range-list-selector/time-range-list-selector.vue';
import { showToast } from '@tarojs/taro';
import { reactive } from 'vue';
const props = withDefaults(
  defineProps<{
    /**
     * 控件是否可见
     */
    modelValue: boolean;
    /**
     *
     * 那一天的时间戳
     * 例如:2023-10-25 00:00:00.000 时间戳
     */
    timestamp: number;
    /**
     * 会议使用情况
     */
    isFullRoom?: boolean[];
  }>(),
  {
    modelValue: false,
    timestamp: 0,
    isFullRoom: () => [],
  },
);

const emits = defineEmits<{
  (e: 'update:modelValue'): void;
  /**
   * 时间区间：30分钟 或者1个小时
   *
   */
  (e: 'onSelected', startTime: number, endTime: number): void;
}>();
const state = reactive<{
  startTime: number;
  endTime: number;
}>({
  startTime: 0,
  endTime: 0,
});

/**
 *选择时间回调
 */
function selectTimeRange(startTime: number, endTime: number) {
  state.startTime = startTime;
  state.endTime = endTime;
}

function selectTimeConfirm() {
  if (state.startTime === 0) {
    showToast({ title: '请选择会议时间', icon: 'error' });
    return;
  }

  emits('onSelected', state.startTime, state.endTime);
  emits('update:modelValue');
}

/**
 * popup关闭
 */
function close() {
  emits('update:modelValue');
}
</script>
<template>
  <nut-popup
    round
    position="bottom"
    :style="{ height: '70vh' }"
    :visible="props.modelValue"
    @click-overlay="close"
  >
    <view class="app-time-range-list-selector-popup">
      <view class="app-time-range-list-selector-popup__header">
        <text class="app-time-range-list-selector-popup__header--left" @click="close">取消</text>
        <nut-button
          type="info"
          size="small"
          class="app-time-range-list-selector-popup__header--right"
          @click="selectTimeConfirm"
          >确定</nut-button
        >
      </view>
      <time-range-list-selector
        :is-full-room="props.isFullRoom"
        :timestamp="props.timestamp"
        @on-selected="selectTimeRange"
      />
    </view>
  </nut-popup>
</template>
<style lang="scss">
.app-time-range-list-selector-popup {
  padding: 20px;
  &__wrapper {
    padding: 40px 0;
    background-color: #fff;
  }
  &__header {
    display: flex;
    align-items: center;
    &--left {
      flex: 1;
      color: #507aee;
      font-size: 28px;
    }
    &--right {
      margin-right: 20px;
    }
  }
}
</style>
